<template>
  <el-table :data="tableData" class="orderList" border style="width: 100%" :height="height" size='mini'>
    <el-table-column prop="houseNumberAddress" label="物业地址" width="250">
      <template slot-scope="scope">
        <span>{{scope.row.address==null?scope.row.houseNumberAddress:scope.row.address}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="cityAreaName" label="区域" width="80"></el-table-column>
    <el-table-column prop="deliveryStatus" label="交付状况" width="80"></el-table-column>
    <el-table-column prop="customer" label="业主" width="80"></el-table-column>
    <el-table-column prop="phone" label="手机号" width="110"></el-table-column>
    <el-table-column prop="nickName" label="微信昵称" width="110"></el-table-column>
    <el-table-column prop="getHomeDate" label="收房日期" width="170" sortable>
      <template slot-scope="scope">
        <span>{{scope.row.getHomeDate}}</span> <span v-if="scope.row.getHomeDate"> ({{scope.row.getHomeTime}})</span>
        <el-tooltip class="item" v-if='scope.row.num<=7 && scope.row.status=="未派单" && scope.row.num>=0' effect="dark" size='mini' :content="'还有'+scope.row.num+'天收房'" placement="bottom-start">
          <span class="date">{{scope.row.num}}</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="serviceTime" label="验房时间段" width="100"></el-table-column>
    <el-table-column prop="adminName" label="服务管家" width="80"></el-table-column>
    <el-table-column prop="status" label="状态" width="120">
      <template slot-scope="scope">
        <span :style="scope.row.status=='待审核'? 'color:#F56C6C' : scope.row.status=='已派单'?'color:#00CC99': 'color:#000'">{{scope.row.status}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="orderNo" label="订单号" width="170"></el-table-column>
    <el-table-column prop="remark" label="备注" width="150"></el-table-column>
    <el-table-column prop="orderTime" label="时间" width="150"></el-table-column>
    <el-table-column fixed="right" label="操作" width="180">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="editOrder(scope.row)">编辑</el-button>
        <el-tooltip class="item" v-if='scope.row.status=="待审核"||scope.row.status=="未派单"||scope.row.status=="已派单"' effect="dark" size='mini' content="关闭交易订单" placement="bottom-start">
          <el-button type="text" size="small" v-if='scope.row.status=="待审核"||scope.row.status=="未派单"||scope.row.status=="已派单"' @click="closeOrder(scope.row)">关闭</el-button>
        </el-tooltip>
        <el-button type="text" v-if='scope.row.status=="未派单"' size="small" @click="setServerTime('add',scope.row)">分配管家</el-button>
        <el-button type="text" v-if='scope.row.status=="未派单"' size="small" @click="insertSheet(scope.row)">插单</el-button>
        <el-dropdown v-if='scope.row.status=="已派单"'>
          <span class="el-dropdown-link">
            更多
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span @click="setServerTime('edit',scope.row)">更改服务时间</span></el-dropdown-item>
            <el-dropdown-item><span @click="setButler(scope.row)">更改管家</span></el-dropdown-item>
            <el-dropdown-item><span @click="cancelOrder(scope.row)">取消派单</span></el-dropdown-item>
            <!-- <el-dropdown-item>短信①已发送</el-dropdown-item>
            <el-dropdown-item>短信②未发</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { request } from "../../assets/request.js";
import { doubleFish,setTime } from "../../assets/session.js";
export default {
  data() {
    return {
      tableData: [],
      obj:{
        page:1,
        size:20
      },
      height: window.innerHeight - (window.innerWidth <1366? 347 :283),//计算表格高度
    };
  },
  created(){
    this.selectList(this.obj)
    this.$root.$on("searchOrder",data=>{
      if(data!='no'){
        this.obj=data
      }
      this.selectList(this.obj)
    })
  },
  methods:{
    editOrder(row){ //添加订单
      this.$root.$emit('editOrder',row)
    },
    cancelOrder(row){ //取消订单
      let that=this 
      request.delAlert({
          name:'取消派单',
          that,
          fn(obj){ 
              let url='order/distribution?greenToken='+request.greenToken+'&orderId='+ row.id
              request.ajaxDel({
                url,
                that,
                fn(res){
                  that.selectList(that.obj)
                }
              })
          }
      })
    },
    setButler(row){ //更改管家
      this.$root.$emit('setBut',row)
    },
    setServerTime(type,row){ //更改服务时间
      this.$root.$emit('setServerTime',type,row)
    },
    insertSheet(row){
      this.$root.$emit('insertSheet',row)
    },
    selectList(obj){ //查找数据列表
      let url = "order";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        params:obj,
        fn(res){
          let list=res.list
          let dateTime=setTime(new Date())
          that.$root.$emit("propertBank",res.total)
          for(let i in list){
            if(list[i].status=='1'){
              list[i].status='待审核'
            }else if(list[i].status=='2'){
              list[i].status='未派单'
            }else if(list[i].status=='3'){
              list[i].status='已派单'
            }else if(list[i].status=='4'){
              list[i].status='已完成'
            }else if(list[i].status=='5'){
              list[i].status='已终止'
            }
            if(list[i].deliveryStatus=='0'){
              list[i].deliveryStatus='毛坯'
            }else{
              list[i].deliveryStatus='精装'
            }
            if(list[i].getHomeTime=='1'){
              list[i].getHomeTime='上午'
            }else if(list[i].getHomeTime=='2'){
              list[i].getHomeTime='下午'
            }else{
              list[i].getHomeTime='全天'
            }
            if(list[i].getHomeDate){
              let dateList=doubleFish(dateTime,list[i].getHomeDate)
              let num=0
              for(let j in dateList){
                num+=dateList[j]
              }
              list[i].num=(num-1)
            }
          }
          that.tableData=list
        }
      })
    },
    closeOrder(row){
      let that=this
      request.delAlert({
          name:'关闭改订单',
          that,
          fn(obj){
              let url='order/colse/'+row.id
              let met='PUT'
              request.ajaxPost({
                url,
                that,
                type:met,
                fn(res) {
                  that.selectList(that.obj)
                }
              });
          }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.el-dropdown-link{
  font-size: 12px;
  margin-left: 10px;
}
.orderList{
  .date{
    background: #ff9900;
    color: #ffffff;
    padding: 3px 7px;
    border-radius: 2px;
    margin-left: 5px;
    cursor: pointer;
    
  }
}
</style>
